import React, { useEffect } from 'react';
import * as echarts from 'echarts';
import "./index.scss"
type EChartsOption = echarts.EChartsOption;

const LineChart = () => {   
    var right: any = null;
    useEffect(() => {
        right = initEcharts('right', '', [], []);
    }, [])
    var initEcharts = (dom: any, title: any, xAxis: any, series: any) => {

        var myChart = echarts.init(document.getElementById(dom) || document.body);
        var option: EChartsOption;
        option = {
            title: {
                text: '本月销售情况'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 17903, name: '销售总数' },
                        { value: 735, name: '退款' },
                        { value: 580, name: '换货' }           
                    ]
                }
            ]
        };
        option &&  myChart.setOption(option);
    }
    return (
        <div className='linechart'>
            <div id="right">

            </div>
        </div>
    );
};

export default LineChart;